<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="../../css/timecheck.css" />
  <link rel="stylesheet" href="../../fonts/iconfont.css" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <style>
    html,
    body,
    #app {
      width: 100%;
      /*height: 100%;*/
      /*margin-bottom: 0.3rem;*/
    }
    #app{
      margin-bottom: 0.6rem;
    }
    .total-info {
      margin-top: 0.04rem;
      background-color: #FFFFFF;
      text-align: center;
      font-size: 0.22rem;
      line-height: 0.45rem;
    }

    table {
      font-size: 0.2rem;
      width: 100%;
      text-align: center;
      margin-top: 0.1rem;
    }

    table tr td{
      padding: 0.1rem 0;
      height: 0.8rem;
    }
    table,
    table,
    tbody,td div{
      text-align: center;
    }
    td span{
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
    .bglight {
      background-color: #FFFFFF;
    }

    .tab-head {
      background-color: #FFFFFF;
      line-height: 0.5rem;
    }

    .light {
      color: #8e8a8a;
    }
    .formDiv{
      width: 100%;
      margin-top: 0.2rem;
      background-color: white;
      border-radius: 0.2rem;
      padding: 0.2rem ;
      text-align: center;
      overflow: hidden;
    }
    .formDiv p{
      margin: 0;
      color:black;
    }
    .flex{
      width: 100%;
      display: flex;
      justify-content:space-around
    }
    .formItem{
      width: 33%;
      margin-top: 0.1rem;
    }
    .formItem p:nth-child(2){
      margin: 0.05rem 0;
    }
    .borderRight1{
      border-right:1px solid #ccc ;
    }
    .fixed{
      width: 100%;
      font-size: 0.2rem;
      background-color: white;
      border-top:1px solid #ccc ;
      border-bottom:1px solid #ccc ;
      position: fixed;
      top:1.15rem;
      z-index: 9999999;
    }
    .fixed span{
      display: inline-block;
      height: 0.6rem;
      line-height: 0.6rem;
      text-align: center;
    }
    .display{
      display: block;
    }
    .displayNone{
      display: none;
    }
    .form{
      width: 100%;
      background-color: white;
      padding: 0.25rem 0.1rem;
      margin-top: 0.2rem;
      overflow: hidden;
    }
    .form .form-item{
      width: 49%;
      height: 2.35rem;
      background-color: #efeff4;
      text-align: center;
      border-radius: 0.2rem;
      padding: 0.2rem 0 0;
      margin-bottom: 0.2rem;
      float: left;
    }
    .form .form-item:first-child{
      margin-right: 2%;
    }
    .form .form-item p{
      margin-bottom: 0.05rem;
      color:black;
    }
    .fontSizeBig{
      font-size: 0.26rem;
    }
    .fontSizeSmall{
      font-size: 0.22rem;
    }
    .flexItem{
      width: 50%;
    }
    .form .form-item .flexItem p{
      margin-bottom: 0;
    }
    .choose{
      width: 1rem;
      margin: 0;
      text-align: center;
      padding: 0.02rem ;
      font-size: 0.18rem;
      background-color: white;
      border: 1px solid #ED7D31;
    }
    .chooseList{
      text-align: center;
      background-color: white;
      border-left: 1px solid #ED7D31;
      border-right: 1px solid #ED7D31;

    }
    .chooseList p{
      width:100%;
      margin: 0;
      padding: 0.02rem;
      border-bottom: 1px solid #ED7D31;
      font-size: 0.18rem;
      color:black;
    }
    .chooseList  .default{
      color:white;
      background-color: #ED7D31 ;
    }
    .dotDiv {
      width: 0.6rem;
      position: absolute;
      top: 0.15rem;
      right: 0;
    }

    .dotDiv .dot {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background-color: #ccc;
      margin: 0.05rem auto 0;
      /*float: right;*/
      /*margin-right: 0.05rem ;*/
    }
  </style>
</head>

<body>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../config.js" type="text/javascript" charset="utf-8"></script>
<script src="../../common/timeCheck.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/mui.min.js"></script>
<div id="app" class="mui-content">

  <time-check :type="2" :names='names' :dateType="dateType" :leftdata="totalData.cunScore" :rightdata="totalData.useTicket" leftunit="" rightunit="" :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
  <div class="total-info flex">
    <div class="flex-item textLeft">本店剩余积分：--</div>
  </div>
  <div  class="form">
    <div class="form-item">
      <p  class="fontSizeBig"> <strong>机器出票</strong></p>
      <p class="fontSizeSmall">收G币量：{{totalData.collectCoinNum}}</p>
      <div class="flex">
        <div class=" flexItem borderRight1">
          <p class="fontSizeSmall">出票</p>
          <p class="fontSizeSmall">{{totalData.outTicket}}张</p>
          <p class="fontSizeSmall" style="color:#8e8a8a">{{totalData.outTicketNo}}张/G币</p>
        </div>
        <div class="flexItem">
          <p class="fontSizeSmall">存票</p>
          <p class="fontSizeSmall">{{totalData.depositTicket}}张</p>
          <p class="fontSizeSmall" style="color:#8e8a8a">{{(totalData.depositTicketProportion*100).toFixed(2)}}%</p>
        </div>
      </div>
    </div>
    <div class="form-item" >
      <p class="fontSizeBig"> <strong>人工清票</strong></p>
      <p class="fontSizeSmall">清票次数：{{totalData.cleanTicketNum}}</p>
      <div class="flex">
        <div class=" flexItem borderRight1">
          <p class="fontSizeSmall">清票人数</p>
          <p class="fontSizeSmall">{{totalData.cleanTicketPelNum}}人</p>
        </div>
        <div class="flexItem">
          <p class="fontSizeSmall">存积分</p>
          <p class="fontSizeSmall">{{totalData.cleanTicketScore}}</p>
        </div>
      </div>
    </div>
    <div class="form-item" style="margin-right:2%;height: 2rem" >
      <p class="fontSizeBig"> <strong>卡片存积分</strong></p>
      <p class="fontSizeSmall">参与人数：{{totalData.itemTicketPelNum}}</p>
      <div class="flex">
        <div class=" flexItem borderRight1">
          <p class="fontSizeSmall">卡片张数</p>
          <p class="fontSizeSmall">{{totalData.itemTicketCardNum}}张</p>
        </div>
        <div class="flexItem">
          <p class="fontSizeSmall">存积分</p>
          <p class="fontSizeSmall">{{totalData.itemTicketScore}}</p>
        </div>
      </div>
    </div>
    <div class="form-item" style="position: relative;height: 2rem">
      <p class="fontSizeBig"> <strong>娃娃换积分</strong></p>
      <p class="fontSizeSmall">参与人数：{{totalData.peopleNum}}</p>
      <div class="dotDiv" @click="toPage('lotteryGiftExchange')">
        <p class="dot"></p>
        <p class="dot"></p>
        <p class="dot"></p>
      </div>

      <div class="flex">
        <div class=" flexItem borderRight1">
          <p class="fontSizeSmall">回收娃娃</p>
          <p class="fontSizeSmall">{{totalData.adollNum}}个</p>
        </div>
        <div class="flexItem">
          <p class="fontSizeSmall">换积分</p>
          <p class="fontSizeSmall">{{totalData.exchangeScore}}</p>
        </div>
      </div>
    </div>
    <div class="form-item" style="margin-right:2%;height: 1.6rem" >
      <p class="fontSizeBig"> <strong>手动存票</strong></p>
      <div class="flex">
        <div class=" flexItem borderRight1">
          <p class="fontSizeSmall">人数</p>
          <p class="fontSizeSmall">{{totalData.manualPelNum}}人</p>
        </div>
        <div class="flexItem">
          <p class="fontSizeSmall">存积分</p>
          <p class="fontSizeSmall">{{totalData.manualScore}}</p>
        </div>
      </div>
    </div>


  </div >









  <div class="division flex" style="position: relative">
    <div class="line"><span></span></div>
    <div class="division-word">
      设备出票报告
    </div>
    <div class="line" style="text-align: left;width:0.3rem;"><span style="width:0.7rem;"></span></div>
    <div style="position: absolute;top:0;right:0.1rem">
      <div @click="openModal" class="choose">{{chooseValue}}</div>
      <div class="chooseList" v-show="modalShow">
        <p v-for="item in sortList "  @click="choose(item.id)" :class=" sortType === item.id ? 'default' : '' "  >{{item.value}}</p>
      </div>
    </div>
  </div>
  <!---->
  <div class="fixed" :class="isFixed ===true ? 'display':'displayNone'" style="z-index: 99999">
    <span style="width:35.2%">设备</span>
    <span style="width:22%" class="light">数量</span>
    <span style="width:23%" class="light">总收G币</span>
    <span style="width:17%">出票率</span>
  </div>
  <!---->
  <table>
    <tr class="tab-head "  >
      <td style="width:30%">设备</td>
      <td style="width:20%" class="light">数量</td>
      <td style="width:20%" class="light">总收G币</td>
      <td style="width:15%">出票率</td>
    </tr>
    <tr v-show="totalData.games.length !== 0 "  v-for="(item,index) in deviceList" :key="index" :class="{bglight:index%2===1}" @click="toMachine(index)">
      <td style="width:30%">
        <div >
          <img style="width: 0.28rem;position:relative;top:0.05rem;float: left;margin-left: 0.2rem" src="../../images/caipiao.png" alt="">
          <span style="width: 70%;text-align: left">{{item.deviceName}}</span>
        </div>
      </td>
      <td style="width:20%" class="light">
        <div style="overflow: hidden;position: relative;width: 100%;">
          <span>{{item.deviceNum ? item.deviceNum+'台' : 0 }}</span>
          <img v-show="item.deviceState ===1&&dateType===0" src="../../images/troubleflag-green.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
          <img v-show="item.deviceState ===2&&dateType===0" src="../../images/troubleflag-red.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
          <img v-show="item.deviceState ===3&&dateType===0" src="../../images/troubleflag-gray.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
          <img v-show="item.deviceState ===4&&dateType===0" src="../../images/troubleflag-gray2.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
        </div>
      </td>
      <td style="width:20%" class="light"><div><span>{{item.totalCollectCoinNum}}</span></div></td>
      <td style="width:15%"><div><span>{{item.outTicket !== '--' ? item.outTicket+'张/G币' : item.outTicket }}</span></div></td>
    </tr>
  </table>
  <p v-show="totalData.games.length === 0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
    暂无数据
  </p>
  <p style="width: 100%;margin:2.5rem 0 0; padding: 0 0 0 0.1rem; text-align: left;color:white;background-color:#ED7D31;font-size: 0.22rem">数据来源：门店抄表({{totalData.timeData}})</p>
  <two-nav currenturl="lotteryStoreDetail" :storename="storeName" ></two-nav>

</div>
<script src="../../common/nav.js"></script>
<script type="text/javascript">
  mui.init()
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        names: {
          leftName: '存积分',
          rightName: '用积分'
        },
        fromDate: '',
        toDate: '',
        storeId: '',
        storeName: '',
        actnum:0,
        totalData: {
          games:[]
        },
        dateType:'',
        isFixed:false,   //是否固定表头
        lastPage:'',
        top:'1rem',
        //排序
        modalShow:false,
        sortList:[
          {id:0,value:'按名称'},
          {id:1,value:'按数量'},
          {id:2,value:'按总收G币'},
          {id:3,value:'按出票率'},
        ],
        sortType:0,
        chooseValue:'按名称',
        int:0,    //0 点击第一次 张开  1 关闭
        deviceList:[
          {
            "deviceId":0,
            "deviceName":"小sadfddadada马",
            "deviceModel":"XFXM",
            "deviceNum":4,
            "totalCollectCoinNum":0,
            "outTicket":0,
            "outTicketNo":0
          }
        ],
      }
    },
    mounted :function(){
      var vm =  this
      mui.plusReady(function() {
        vm.receiveParams()
      })
      window.addEventListener('scroll', this.handleScroll)
    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview()
        this.toDate = sf.toDate
        this.storeId = sf.storeId
        this.storeName = sf.storeName
        this.fromDate = sf.fromDate
        this.actnum  = sf.actnum
        this.dateType  = sf.dateType
      },
      loadData: function() {
        var vm = this;
        config.ajax({
          url: '/Whphone/fanStorePrize',
          data: {
            fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
            toDate: new Date(vm.toDate).format('yyyyMMdd'),
            storeId: vm.storeId,
            storeName: vm.storeName,
            checkType:3,  //3  彩票
          },
          success: function(res) {
            console.log('列表数据：'+JSON.stringify(res))
            if(res.result === 1){
              vm.totalData = res.FanStoreAward;
              vm.deviceList=JSON.parse(JSON.stringify(res.FanStoreAward.games))
              var startTime=vm.totalData.fromDateNew.toString();
              var endTime=vm.totalData.toDateNew.toString();
              var timeData='';
              timeData=startTime.replace(/^(\d{4})(\d{2})(\d{2})$/,"$1"+'.'+"$2"+"."+"$3")+'-'+endTime.replace(/^(\d{4})(\d{2})(\d{2})$/,"$1"+'.'+"$2"+"."+"$3");
              vm.totalData.timeData=timeData;
              if(vm.deviceList.length !==0){
                vm.sortFun();
              }
            } else{
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
      toMachine: function(index) {
        var vm = this
        mui.openWindow({
          url: './lotteryDeviceList.html',
          id: 'lotteryDeviceList',
          styles: {
            titleNView: {
              titleText: vm.fromDate +'至' + vm.toDate,
              titleColor: "#FFFFFF",
              titleSize: "14px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              buttons: [{
                fontWeight: 'normal',
                fontSize: '18px',
                float: 'right',
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            deviceId: vm.deviceList[index].deviceId,
            deviceModel: vm.deviceList[index].deviceModel,
            deviceName:vm.deviceList[index].deviceName,
            fromDate: vm.fromDate,
            toDate: vm.toDate,
            storeName:vm.storeName,
            storeId:vm.storeId,
            dateType:vm.dateType
          }
        });
      },
      handleScroll:function(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if(scrollTop > 350){
          vm.isFixed=true;
          vm.top='1.75rem'
        }else {
          vm.isFixed=false;
          vm.top='1.18rem'
        }
      },
//去同级的其他页面（收入，收币，返奖，出票，榜单，活动）
      toOtherPage:function(url){
        console.log(6)
        var vm = this;
        var storeName=vm.storeName;
        var self=plus.webview.currentWebview();
        mui.openWindow({
          url: './'+url+'.html',
          id: url,
          styles: {
            titleNView: {
              titleText:  storeName ,
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              buttons: [{
                fontWeight: 'normal',
                fontSize: '18px',
                float: 'right',
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            storeId: vm.storeId,
            storeName: vm.storeName,
            fromDate: vm.fromDate,
            toDate:vm.toDate,
            dateType:vm.dateType,
            actnum: vm.actnum,
            lastPage:'coinShopOperated',
          },
          createNew:true,
        });
        setTimeout(function(){
          self.close('none');
        },1000)
      },
      openModal:function(){
        if(vm.int === 0){
          this.modalShow=true;
          vm.int =1
        }else if(vm.int ===1){
          this.modalShow=false;
          vm.int =0
        }
      },
      //选择排序type
      choose:function(id){
        vm.sortType =id;
        vm.chooseValue = vm.sortList[id].value;
        vm.modalShow=false;
        vm.int=0;
        vm.sortFun();
      },
      //排序fun
      sortFun:function(){
        if(vm.sortType === 0){
          vm.deviceList = vm.deviceList.sort(function compareFunction(item1, item2) {
            return (item1.deviceModel).localeCompare(item2.deviceModel);
          });
        }else if(vm.sortType === 1){
          vm.deviceList.sort(function(a,b){
            var last=b.deviceNum !=='--' ? b.deviceNum : -1;
            var next=a.deviceNum !=='--' ? a.deviceNum : -1;
            return last - next
          })
        }else if(vm.sortType === 2){
          vm.deviceList.sort(function(a,b){
            var last=b.totalCollectCoinNum !=='--' ? b.totalCollectCoinNum : -1;
            var next=a.totalCollectCoinNum !=='--' ? a.totalCollectCoinNum : -1;
            return last - next
          })
        }else if(vm.sortType === 3){
          vm.deviceList.sort(function(a,b){
            var last=b.outTicket !=='--' ? b.outTicket : -1;
            var next=a.outTicket !=='--' ? a.outTicket : -1;
            return last - next
          })
        }
      },
//娃娃换积分详情页面
      toPage:function(url){
        var vm = this;
        var storeName=vm.storeName;
        mui.openWindow({
          url: './'+url+'.html',
          id: url,
          styles: {
            titleNView: {
              titleText:  storeName,
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            storeId: vm.storeId,
            storeName: vm.storeName,
            fromDate: vm.fromDate,
            toDate:vm.toDate,
            dateType:vm.dateType,
            actnum: vm.actnum,
            lastPage: 'incomeItem',
          },
          createNew:true,
        });
      },
    },
    watch: {
      fromDate: function() {
        this.loadData()
      }
    }
  })
</script>
</body>

</html>